import React, { useState } from 'react'
import { API } from '../../config'
import { CartItem, deleteCartItem, getCart, updateCartItem } from '../../helpers/cart'
import { Button, Image, Input } from 'antd'

export interface Props {
  product: CartItem,
  setCart: (args:CartItem[])=>void
}

const CartItemFc = (props: Props) => {
  const {product, setCart} = props
  const [count, setCount] = useState<number>(product.count)
  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(event.target.value)
    setCount(value)
    setCart(updateCartItem(product._id,value))
  }
  return (
    <tr className="ant-table-row">
      <td className="ant-table-cell">
      <Image width={120} src={`${API}/product/photo/${product._id}`} alt={product.name} />
      </td>
      <td className="ant-table-cell">{product.name}</td>
      <td className="ant-table-cell">{product.price}</td>
      <td className="ant-table-cell">{product.category.name}</td>
      <td className="ant-table-cell">
        <Input type="number" value={count} onChange={handleOnChange} />
      </td>
      <td className="ant-table-cell">
        <Button type="primary" danger onClick={()=>setCart(deleteCartItem(product._id))}>删除</Button>
      </td>
  </tr>
  )
}
export default CartItemFc